html {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
  }
  h1 {
	font-size: 1.8rem;
	color: white;
  }
  .topnav {
	overflow: hidden;
	background-color: #0A1128;
  }
  body {
	margin: 0;
  }
  .content {
	padding: 50px;
  }
  .card-grid {
	max-width: 600px;
	margin: 0 auto;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  .card {
	background-color: white;
	box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);
  }
  .card-title {
	font-size: 1.2rem;
	font-weight: bold;
	color: #034078
  }
  .state {
	font-size: 1.2rem;
	color:#1282A2;
  }
  .switch {
	position: relative;
	display: inline-block;
	width: 120px;
	height: 68px
  }
  .switch input {
	display: none
  }
  .slider {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: #ccc;
	border-radius: 50px
  }
  .slider:before {
	position: absolute;
	content: "";
	height: 52px;
	width: 52px;
	left: 8px;
	bottom: 8px;
	background-color: #fff;
	transition: .4s;
	border-radius: 50px;
  }
  input:checked+.slider {
	background-color: #b30000;
  }
  input:checked+.slider:before {
	-webkit-transform: translateX(52px);
	-ms-transform: translateX(52px);
	transform: translateX(52px);
  }